<!DOCTYPE html>`
<html>
<head>
    <title>Stellar.js Backgrounds Demo</title>
    <style type="text/css">
        body,span,div{
            margin: 0;
            padding: 0;
        }
        body {
            font-family: helvetica,arial;
        }
        .photo {
            background-attachment: fixed;
            background-position: 50% 0;
            /*background-repeat: no-repeat;*/
            height: 700px;
            position: relative;
        }
        .photo span {
            bottom: 0;
            display: block;
            color:white;
            font-size: 38px;
            left: 50%;
            margin-left: -640px;
            padding: 10px;
            position: absolute;
            text-shadow: 0 2px 0 black, 0 0 10px black;
            width: 1280px;
        }
        .summer {
            background-image: url("images/summer.jpg");
        }
        .autumn {
            background-image: url("images/autumn.jpg");
        }
        .winter {
            background-image: url("images/winter.jpg");
        }
        .spring {
            background-image: url("images/spring.jpg");
        }

    </style>
    <script src="jquery1.js"></script>
    <script src="jquery.stellar.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $.stellar({
                horizontalScrolling: false,
                verticalOffset: 40
            });
        });
    </script>
</head>
<body>
<div class="photo summer" style="background-position: 50% 0px;"  data-stellar-background-ratio="0.5" >
    <span>Summer</span>
</div>
<div class="photo autumn" style="background-position: 50% 0px;"  data-stellar-background-ratio="0.5" >
    <span>Autumn</span>
</div>
<div class="photo winter" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
    <span>Winter</span>
</div>
<div class="photo spring" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
    <span>Spring</span>
</div>
<div class="photo summer" style="background-position: 50% 0px;" data-stellar-background-ratio="0.5" >
    <span>Summer</span>
</div>
<div class="photo autumn" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
    <span>Autumn</span>
</div>
<div class="photo winter" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
    <span>Winter</span>
</div>
<div class="photo spring" style="background-position: 50% 0px;" data-stellar-background-ratio="0.2" >
    <span>Spring</span>
</div>
</body>
</html>
